<template>
	<view class="page-content">
		<view class="containerV">
			<view class="headerV">
				<view class="top-tips1">
					<view>请将正对手机，头部匹配摄像区域</view>
				</view>
				<view class="top-tips2">为了捍卫你的不要脸，请拍摄本人头像</view>
			</view>
			<view class="contentV">
				<view class="mark"></view>
				<image v-if="tempImg" mode="widthFix" :src="tempImg" />
				<camera v-if="isAuthCamera" :device-position="devicePosition ? 'front' : 'back'" class="camera" flash="off" resolution="high" />
				<view v-show="!tempImg && tipsText" class="tipV">{{ tipsText }}</view>
			</view>
			<view class="footerV">
				<view style="width: 100%">
					<view v-if="!tempImg" style="width: 100%">
						<view class="privacyV">
							<view class="icon"></view>
							<view class="text">
								照片隐私
								<text @click="handleJumpSecurityClick">安全保障</text>
								中…
							</view>
						</view>
						<view class="bottom-tips-2">该照片作为你不要脸的铁证</view>
						<view class="take-photo-bgV">
							<!-- 图片上传 -->
							<view v-show="true" class="btn-change-upload" @click="handleChooseImage" />
							<!--拍照-->
							<view class="btn-take-photo" @click="handleTakePhotoClick" />
							<!-- 切换镜头 -->
							<view class="btn-change-camera" @click="handleChangeCameraClick" />
						</view>
					</view>
					<view class="confirmV" v-else>
						<view class="btn-cancel" @click="handleCancelClick">取消</view>
						<view class="btn-ok" @click="handleOkClick">确定</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
const tipsText = ref(''); //错误文案提示
const tempImg = ref(''); //本地图片路径
const cameraEngine = ref(null); //相机引擎
const devicePosition = ref(false); //摄像头朝向
const isAuthCamera = ref(true); //是否拥有相机权限
onLoad(() => {
	initData();
});
const initData = () => {
	// 1、初始化人脸识别
	wx.initFaceDetect();
	// 2、创建 camera 上下文 CameraContext 对象
	cameraEngine.value = wx.createCameraContext();
	// 3、获取 Camera 实时帧数据
	const listener = cameraEngine.value.onCameraFrame((frame) => {
		if (tempImg.value) {
			return;
		}
		// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
		wx.faceDetect({
			frameBuffer: frame.data,
			width: frame.width,
			height: frame.height,
			enablePoint: true,
			enableConf: true,
			enableAngle: true,
			enableMultiFace: true,
			success: (faceData) => {
				let face = faceData.faceInfo[0];
				if (faceData.x == -1 || faceData.y == -1) {
					tipsText.value = '检测不到人';
				}
				if (faceData.faceInfo.length > 1) {
					tipsText.value = '请保证只有一个人';
				} else {
					const { pitch, roll, yaw } = face.angleArray;
					const standard = 0.5;
					if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard || Math.abs(yaw) >= standard) {
						tipsText.value = '请平视摄像头';
					} else if (
						face.confArray.global <= 0.8 ||
						face.confArray.leftEye <= 0.8 ||
						face.confArray.mouth <= 0.8 ||
						face.confArray.nose <= 0.8 ||
						face.confArray.rightEye <= 0.8
					) {
						tipsText.value = '请勿遮挡五官';
					} else {
						tipsText.value = '请拍照';
						// 这里可以写自己的逻辑了
					}
				}
			},
			fail: (err) => {
				if (err.x == -1 || err.y == -1) {
					tipsText.value = '检测不到人';
				} else {
					tipsText.value = err.errMsg || '网络错误，请退出页面重试';
				}
			}
		});
	});
	// 5、开始监听帧数据
	listener.start();
};
// 切换设备镜头
const handleChangeCameraClick = () => {
	devicePosition.value = !devicePosition.value;
};
// 点击确定上传
const handleOkClick = () => {
	uni.showLoading({
		mask: true,
		title: '校验中...'
	});
	// 更新人脸识别图片请求协议：传七牛图片链接
	setTimeout(function () {
		uni.hideLoading();
		uni.showToast({
			icon: 'none',
			title: '假装图片上传成功',
			duration: 2000
		});
	}, 3000);
};
// 图片上传
const handleChooseImage = () => {
	uni.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'],
		sourceType: ['album'],
		success: (res) => {
			if (res.errMsg === 'chooseImage:ok') {
				uni.showLoading({
					title: '照片上传中...'
				});
				console.log('===========:', res.tempFilePaths[0]);
				handleOkClick();
			}
		},
		fail: (res) => {}
	});
};
// 拍照点击
const handleTakePhotoClick = () => {
	if (tipsText.value != '' && tipsText.value != '请拍照') {
		return;
	}
	uni.getSetting({
		success: (res) => {
			if (!res.authSetting['scope.camera']) {
				isAuthCamera.value = false;
				uni.openSetting({
					success: (res) => {
						if (res.authSetting['scope.camera']) {
							isAuthCamera.value = true;
						}
					}
				});
			}
		}
	});
	cameraEngine.value.takePhoto({
		quality: 'high',
		success: ({ tempImagePath }) => {
			tempImg.value = tempImagePath;
			console.log('=======tempImg:', tempImg.value);
		}
	});
};
// 点击 - 取消上传
const handleCancelClick = () => {
	tempImg.value = '';
};
// 点击 - 人脸安全保障按钮
const handleJumpSecurityClick = () => {
	uni.showToast({
		icon: 'none',
		title: '假装跳转人脸安全保障',
		duration: 2000
	});
};
</script>

<style lang="scss" scoped>
.page-content {
	width: 100%;
	height: 100%;

	.containerV {
		width: 100%;
		height: 100%;

		.headerV {
			.top-tips1 {
				margin-top: 60rpx;
				color: #1c1c1c;
				font-size: 36rpx;
				text-align: center;
			}

			.top-tips2 {
				margin-top: 20rpx;
				color: #00aaff;
				font-size: 28rpx;
				text-align: center;
			}
		}

		.contentV {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			height: 661rpx;
			margin-top: 30rpx;

			.tipV {
				bottom: 30rpx;
				position: absolute;
				line-height: 90rpx;
				padding-left: 24rpx;
				padding-right: 24rpx;
				max-width: calc(100vw - 50rpx * 2);
				text-align: center;
				font-size: 30rpx;
				background: #000000;
				opacity: 0.75;
				color: #ffffff;
				border-radius: 16rpx;

				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				z-index: 5;
			}

			.camera {
				width: 100%;
				height: 100%;
			}

			.mark {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 2;
				width: 750rpx;
				height: 100%;
				background: url('@/static/images/view_face_background.png') no-repeat center bottom;
				background-size: 750rpx 661rpx;
			}

			image {
				position: absolute;
				width: 100%;
				height: 100%;
				z-index: 3;
			}
		}

		.footerV {
			width: 100%;

			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.privacyV {
				padding-top: 30rpx;

				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.text {
					font-size: 30rpx;
					color: #1c1c1c;
					text-align: center;
					line-height: 42rpx;
					margin-left: 15rpx;

					text {
						font-size: 30rpx;
						color: #00aaff;
						text-align: center;
						line-height: 42rpx;
					}
				}

				.icon {
					width: 40rpx;
					height: 47rpx;
					background: url('@/static/icons/安全保障.png') no-repeat;
					background-size: 100% auto;
				}
			}

			.bottom-tips-2 {
				margin-top: 20rpx;
				color: #999999;
				text-align: center;
				font-size: 26rpx;
			}

			.take-photo-bgV {
				width: 100%;
				margin-top: 30rpx;

				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;

				.btn-take-photo {
					// 由于左边没有按钮，所以左边要便宜更大，以便是拍照按钮居中
					margin: 0rpx 80rpx 0rpx 80rpx;
					width: 196rpx;
					height: 196rpx;
					background: url('https://pro-file-qn.ztjy61.com/1003020211103145058685NNR9vlTm.png') no-repeat;
					background-size: 100% auto;
				}

				.btn-change-upload {
					left: 130rpx;
					width: 80rpx;
					height: 80rpx;
					background: url('@/static/icons/上传.png') no-repeat;
					background-size: 100% auto;
				}

				.btn-change-camera {
					right: 130rpx;
					width: 80rpx;
					height: 80rpx;
					background: url('@/static/icons/切换镜头.png') no-repeat;
					background-size: 100% auto;
				}
			}

			.confirmV {
				margin: 200rpx 100rpx 0rpx 100rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;

				.btn-cancel {
					font-size: 32rpx;
					color: #1c1c1c;
				}

				.btn-ok {
					font-size: 32rpx;
					color: #00aaff;
				}
			}
		}
	}
}
</style>
